<template>
  <div class="config-box flex-column">
    <span class="config-label">样式属性</span>
    <div class="config-main flex-column">      
      <!-- <el-select class="config-item" v-model="formItem.configH5.fontFamily" placeholder="字体大小">
        <el-option
          v-for="item in fontFamilyList"
          :key="item.val"
          :label="item.label"
          :value="item.val">
        </el-option>
      </el-select> -->
      <el-color-picker class="config-item" v-model="formItem.configH5.backgroundColor"></el-color-picker>
    </div>
  </div>
</template>

<script>
import {fontSizeList, fontFamilyList} from '@/formgen/components/FormConfig/config.js'
export default {
  name: 'ConfigDShop',
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  watch: {
    value: {
      handler: function(obj){
        this.formItem = obj
      },
      deep: true,
      immediate: true
    }
  },
  data(){
    return {
      formItem: this.value || {},
      fontSizeList: fontSizeList,
      fontFamilyList,
    }
  },
  methods: {
    configChange(){
      this.$emit('input', this.formItem)
    },
  }
} 
</script>

<style scoped lang="scss">
.config-box{
  padding-right: 10px;
  .config-label{
    font-size: 13px;
    color: #3E3E3E;
    margin-bottom: 15px;
  }
  .config-item{
    margin-bottom: 15px;
  }
}
</style>
